<template>
	<view class="">
		<view class="bar_top">
			<view class="search">
				<view class="search_input">
					<image src="/static/images/search.png" mode=""></image>
					<input type="text" value="" placeholder="请输入关键词"/>
				</view>
				<view class="search_btn">搜索</view>
			</view>
		</view>
		
		<view class="item_list">
			<view class="item_box">
				<view class="item_item_list">
					<view class="item_item" v-for="(item, index) in clientList" v-key="index" @tap="back(item)">
						<image :src="item.avatar" mode=""></image>
						<view class="item_item_text">
							<view>{{item.name}}</view>
							<view>{{item.address}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../../../components/loading/loading.vue"
	export default{
		components:{
			Loading
		},
		data(){
			return{
				search:'',
				clientList: []
			}
		},
		
		onLoad() {
			if(this.$app.globalData.upData.library){
				this.getData(1)
			}
			
		},
		methods:{
			getData(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;
					if(type == 1){this.list = [];this.page = 1;this.loading = true;this.$app.globalData.upData.library = false}
					this.$api.getClientList({search: this.search}).then(res => {
						this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
							this.clientList = res.list;
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			back(item){
				console.log(12121)
				uni.navigateTo({
					url:"/pages/work/add/add?id=" + item.id + '&customerName='+item.name
				})
			}
		},
		onReachBottom() {
			this.getData(3)
		}
	}
</script>

<style>
	.item_list{margin-top: 100upx;}
	.item_box{width: 100%;border-bottom: 2upx solid #EEEEEE;background: #FFFFFF;}
	.item_title{width: 100%;height:100upx;display: flex;flex-direction: row;align-items: center;font-size:32upx;color: #333333;padding: 0 30upx;box-sizing: border-box;}
	.item_title_num{width: 40upx;height: 40upx;background: rgba(4,155,255,0.1);font-size: 28upx;color: #049BFF;line-height: 40upx;text-align: center;margin-left: 20upx;}
	.item_title image{margin-left: auto;}
	.item_item_list{width: 100%;padding: 0 30upx 160upx;box-sizing: border-box;background-color: #FFFFFF;}
	.item_item{width: 100%;border-top: 2upx solid #EEEEEE;height: 110upx;display: flex;flex-direction: row;align-items: center;font-size: 28upx;color: #333333;}
	.item_item image{width: 84upx;height: 84upx;border-radius: 50%;background: #EEEEEE;margin-right: 20upx;}
	.item_item_text view:nth-child(2){margin-top: 10upx;font-size: 24upx;color: #9BA7B7;}
</style>
